<template>
  <template v-for="(item, index) in dialogList" :key="index">
    <div :class="['Cdialog', item.draggable ? '' : 'draggable']" :data-type="item.draggable ? 'draggable' : ''"
      v-if="item.show" :style="{
    zIndex: item.Zindex
  }">
      <el-dialog :width="item.width" v-model="item.visible" :show-close="false" :modal="item.modal"
        :z-index="item.Zindex" :draggable="item.draggable" :close-on-click-modal="item.closeOnClickModal"
        :destroy-on-close="true" @close="() => closeDialog(item, index, '', true)" @opened="opened">
        <template #header="close, titleId, titleClass">
          <div class="dialog-header">
            <div class="dialog-title">
              <div class="title-text">
                {{ item.title }}
              </div>
            </div>
            <div class="dialog-close" @click="() => closeDialog(item, index, '', true)">
              <svg-icon icon="close"></svg-icon>
            </div>
          </div>
        </template>
        <div class="content">
          <component :is="item.component" v-bind="item.props"
            @close="(...args: any) => closeDialog(item, index, args)" />
        </div>
      </el-dialog>
    </div>
  </template>
</template>
<script setup lang="ts">
import { dialogList, closeDialog, init } from "./index";
import { useRouter } from "vue-router";
import { watch } from "vue";
import { nextTick } from "vue";
const router = useRouter();
init(router);
// immediate 参数用于控制是否在初始创建 watch 时立即执行回调函数。
watch(() => router.currentRoute.value.path, (newVal, oldVal) => {
  console.log(newVal, oldVal);

  dialogList.forEach((item) => {
    item.show = false;
    item.visible = false;
  });
},
  {
    deep: true
  });
const opened = () => {
  // 获取 .el-overlay-dialog 父级
  nextTick(() => {
    console.log(router.currentRoute.value.path, dialogList);
    let doms = document.querySelectorAll('.Cdialog');
    doms.forEach(item => {
      if (item.getAttribute('data-type') == 'draggable') {
        let children = item.childNodes;
        // 使用pointer-events:none将父级元素的点击事件冒泡到子级元素
        (<any>children[1]).style.pointerEvents = 'none';
      }
      else {
        console.log('无draggable');
        if (dialogList && dialogList.length > 1) {

          // 取dialogList最后一个元素并替换掉dialogList
          dialogList.forEach((item, index) => {
            dialogList.splice(index, 1);
          });

        };
      };
    });
  });
};


</script>

<style lang="scss" scoped>
.Cdialog {
  width: auto;
}

// .dialog-header {
//   width: 100%;
//   display: flex;
//   justify-content: space-between;
//   height: 46px;
//   align-items: center;

//   .dialog-title {
//     width: 389px;
//     height: 100%;
//     // background: url('../../assets/cardImages/弹框标题栏@2x.png') center no-repeat;
//     background-size: 100% 100%;

//     .title-text {
//       margin-left: 24px;
//       font-family: Microsoft YaHei-Bold, Microsoft YaHei;
//       font-weight: bold;
//       line-height: 2.6;
//       font-size: clamp(1rem, 0.83vw, 2rem);
//       text-shadow: 0px 4px 4px #2268F0;
//       background: linear-gradient(180deg, #FFFFFF 0%, #40C6FF 100%);
//       -webkit-background-clip: text;
//       -webkit-text-fill-color: transparent;
//     }
//   }

//   .dialog-close {
//     width: 24px;
//     height: 24px;
//     margin-right: 10px;
//     cursor: pointer;

//     :deep(.svg-icon) svg {
//       width: 24px;
//       height: 24px;
//     }
//   }

// }

// 覆盖层元素增加可穿透点击事件
:deep(.el-dialog__wrapper) {
  pointer-events: none !important;
}

// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
:deep(.el-dialog) {
  --el-bg-color: rgba(9, 23, 51, 0.8) !important;
  background-size: 100% 100%;
  pointer-events: auto !important;

}


//弹框头部
:deep(.el-dialog__header) {
  --el-text-color-primary: #1EFFFF;
  --el-text-color-regular: #fff;
  padding: 0 !important;
  width: 100%;
  height: 46px;

}

//弹框标题
:deep(.el-dialog__title) {
  margin-left: 24px;
  line-height: 64px;
}

//弹框内容部分
// :deep(.el-dialog__body) {
//   --el-bg-color: rgba(9, 23, 51, 0.8) !important;
//   --el-text-color-regular: #fff;
//   padding: 24px !important;
//   box-sizing: border-box;
// }

:deep(.el-dialog) {
  --el-bg-color: rgba(23, 44, 51, 1) !important;
  background-size: 100% 100%;
  border: 1px solid #26BEFF;
}

//弹框内容部分
:deep(.el-dialog__body) {
  --el-bg-color: rgba(23, 44, 51, 1) !important;
  --el-text-color-regular: #fff;
}


.dialog-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: clamp(3.625rem, 3.02vw, 7.25rem);
    background-color: rgba(9, 46, 61, 0.60);
    align-items: center;

    .dialog-title {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        display: flex;
        align-items: center;

        .title-text {
            margin-left: clamp(1.875rem, 1.56vw, 3.75rem);
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-size: clamp(1rem, 0.83vw, 2rem);
            color: #26BEFF;
        }
    }

    .dialog-close {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        cursor: pointer;

        :deep(.svg-icon) svg {
            width: 24px;
            height: 24px;
        }
    }

}
</style>
